<template>
<div style="padding:5px">
    <el-button type="primary" style="margin-bottom:5px"  size="small" @click="openUserSettingDialog">分配人员</el-button>
    <el-table
      :data="tableData"
      border
      size="small"
      >
     <el-table-column
        prop="type"
        label="用户类型"
        >
        <template #default="scope">
          {{showUserTypeLabel(scope.row.type)}}
        </template>
      </el-table-column>
      <el-table-column
        prop="value"
        label="用户来自">
        <template #default="scope">

             <user-label :type="scope.row.type" :value="scope.row.value"></user-label>
  

        </template>
      </el-table-column>
    </el-table>
    <user-setting ref="userSetting" @selectUsers="selectUsers"></user-setting>
</div>
</template>

  <script>
    import pick from 'lodash.pick'
    import UserSetting from './UserSetting/UserSetting.vue'
    import  {getUserTypeLabel} from './UserSetting/UserUtils'
    import UserLabel from './UserSetting/UserLabel.vue'
import elementHelper from 'jp-bpmn-js-properties-panel/lib/helper/ElementHelper'
import find from 'lodash/find'
import { is } from 'jeeplus-bpmn/lib/util/ModelUtil'
import { getBusinessObject } from 'jeeplus-bpmn/lib/util/ModelUtil'
export default {
      props: {
        element: {
          type: Object,
          default: undefined
        },
        bpmnModeler: {
          type: Object,
          default: undefined
        }
      },
      components: {
        UserSetting,
        UserLabel
      },
      data () {
        return {
          outerVisible: false,
          oldRow: null,
          form: {
            type: 'user',
            value: '发起人',
            condition: '',
            operationType: 'and',
            sort: 0
          },
          tableData: []
        }
      },
      methods: {
        add () {
          this.oldRow = null
          this.tableData.push({
            type: '',
            value: '',
            condition: '0',
            operationType: '0',
            sort: 0
          })
        },
        showUserTypeLabel (value) {
          return getUserTypeLabel (value)
        }, 
        edit (row) {
          this.outerVisible = true
          this.oldRow = row
          this.form = JSON.parse(JSON.stringify(row))
        },
        openUserSettingDialog () {
          this.$refs.userSetting.init(JSON.stringify(this.tableData))
        },
        selectUsers (tableData) {
          this.tableData = JSON.parse(tableData)
        },

        del (row) {
          this.tableData.forEach((item, index) => {
            if (item === row) {
              this.tableData.splice(index, 1)
            }
          })
        },
        getExtensionElements (element) {
          let bo = getBusinessObject(element)
          return bo.extensionElements
        },
        createExtensionElements: function (element, bo) {
          var extensionElements = elementHelper.createElement('bpmn:ExtensionElements', { values: [] }, bo, this.bpmnModeler.get('bpmnFactory'))
          bo.extensionElements = extensionElements
          return extensionElements
        },
        isExtensionElements (element) {
          return is(element, 'bpmn:ExtensionElements')
        },
        getButtonsElement (element) {
          if (!this.isExtensionElements(element)) {
            return element.buttons
          } else {
            return this.getButtonsElementInsideExtensionElements(element)
          }
        },
        getButtonsElementInsideExtensionElements (extensionElements) {
          return find(extensionElements.values, function (elem) {
            return is(elem, 'flowable:Assignee')
          })
        },
        updateElements (tableDatas) {
          let element = this.element
          let bo = getBusinessObject(element)
          let parent = this.getExtensionElements(element)

          if (!parent && typeof this.createExtensionElements === 'function') {
            parent = this.createExtensionElements(element, bo)
          }
          let objList = []
          tableDatas.forEach((row) => {
            var user = elementHelper.createElement('flowable:Assignee', row, parent, this.bpmnModeler.get('bpmnFactory'))
            objList.push(user)
          })

          let old = []
          if (this.element.businessObject.extensionElements) {
            this.element.businessObject.extensionElements.values.forEach((value) => {
              if (is(value, 'flowable:Assignee')) {
                old.push(value)
              }
            })
          }
          this.bpmnModeler.get('commandStack').execute('properties-panel.update-businessobject-list', {
            element: element,
            currentObject: parent,
            propertyName: 'values',
            objectsToRemove: old
          })

          this.bpmnModeler.get('commandStack').execute('properties-panel.update-businessobject-list', {
            element: element,
            currentObject: parent,
            propertyName: 'values',
            objectsToAdd: objList
          })
        }
      },
      watch: {
        tableData: {
          handler (newVal) {
            if (this.element) {
              this.updateElements(newVal)
            }
          },
          deep: true
        },
        'element': {
          handler (newVal) {
            this.tableData = []
            if (this.element.businessObject.extensionElements) {
              this.element.businessObject.extensionElements.values.forEach((value) => {
                if (is(value, 'flowable:Assignee')) {
                  value = pick(value, 'id', 'type', 'value', 'condition', 'operationType', 'sort')
                  this.tableData.push(JSON.parse(JSON.stringify(value)))
                }
              })
            }
          },
          immediate: true,
          deep: false
        }
      }
}
  </script>